<template>
  <div class="post">
    <label>
      姓名:
      <input type="text" v-model="name" v-focus>
    </label>
    <label>
      评论:
      <textarea cols="22" rows="5" v-model="msg"></textarea>
    </label>
    <button @click="subFun">提交评论</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      msg: "",
      bo: false
    };
  },
  methods: {
    subFun() {
      if (this.name.trim() != "" && this.msg.trim() != "") {
        this.$emit("subClk", this.name, this.msg, this.bo);
        this.msg = "";
      } else if (this.name.trim() != "") {
        alert("评论不能为空");
      } else {
        alert("姓名不能为空");
      }
    }
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  },
  beforeCreate() {
    console.log("Post-beforeCreate");
  },
  created() {
    console.log("Post-created");
  },
  beforeMount() {
    console.log("Post-beforeMount");
  },
  mounted() {
    console.log("Post-mounted");
  },
  beforeUpdate() {
    console.log("Post-beforeUpdate");
  },
  updated() {
    console.log("Post-updated");
  },
  beforeDestroy() {
    console.log("Post-beforeDestroy");
  },
  destroyed() {
    console.log("Post-destroyed");
  }
};
</script>

<style>
.post {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
label {
  flex-basis: 100%;
  margin-bottom: 5px;
}
</style>
